<template>
  <div class="bottom">
    <!-- 智能瓦斯抽采 -->
    <data-box
      wd="33.8125rem"
      he="3.0625rem"
      class="gas-box"
      title="智能瓦斯抽采"
      :bg="wind_box_header"
    >
      <template slot="content">
        <div class="gas-content">
          <div class="gas-data">
            <div
              class="gas-data-item"
              v-for="(item, index) in gasDataList"
              :key="index"
            >
              <img :src="item.img" alt="" />
              <div class="desc">
                <span class="title">{{ item.title }}</span>
                <div class="text">
                  <span class="num">{{ item.num }}</span>
                  <span class="unit">万㎡</span>
                </div>
              </div>
            </div>
          </div>
          <div class="charts-box" style="margin-left: 3.0625rem">
            <SubTitle
              style="margin-top: 1.0313rem"
              title="瓦斯抽采/利用"
              wd="19.375rem"
              he="1.4375rem"
              :isMutiple="true"
              :num="[13.46, 9.77]"
              unit="万m³"
              theme-one="#00F6F8"
              theme-two="#A2B9FD"
            />
            <GroupBarChart
              style="margin-top: 1.0313rem; height: 11.375rem"
              :data="gasChartData"
              :showLegend="true"
              position="top-right"
              :area="chartOption.area"
              :unit="chartOption.unit"
              :color="chartOption.color"
            />
          </div>
        </div>
      </template>
    </data-box>

    <!-- 智能通风 -->
    <data-box
      wd="33.8125rem"
      he="3.0625rem"
      class="wind-box"
      title="智能通风"
      :bg="wind_box_header"
    >
      <template slot="content">
        <div class="wind-content" style="margin-top: 1.1563rem">
          <div class="wind-data">
            <div
              class="wind-data-item"
              v-for="(item, index) in windDataList"
              :key="index"
            >
              <img :src="item.img" alt="" />
              <div class="desc">
                <span class="title">{{ item.title }}</span>
                <div class="text">
                  <span class="num">{{ item.num }}</span>
                  <span class="unit">m³</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 回风井 -->
          <div class="wind-well">
            <div
              class="wind-well-item"
              v-for="(item, index) in windWellList"
              :key="index"
            >
              <div class="wind-well-left">
                <div class="well">
                  <img :src="item.icon" alt="" />
                </div>
                <div class="well-title">
                  <img :src="item.arrow" alt="" />
                  <span class="title">{{ item.title }}</span>
                </div>
              </div>
              <div
                :class="
                  item.status == 0 ? 'wind-well-default' : 'wind-well-active'
                "
              >
                {{ item.status == 0 ? "停止" : "运行" }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </data-box>

    <!-- 智能供电与供排水 -->
    <data-box
      wd="42.6875rem"
      he="3.0625rem"
      class="hypdropower-box"
      title="智能供电与供排水"
      :bg="hypdropower_box_header"
    >
      <template slot="content">
        <div class="hypdropower-content" style="margin-top: 0.5313rem">
          <div class="content-right">
            <SubTitle
              title="今日供电"
              he="1.4375rem"
              :isMutiple="true"
              :num="[55.4]"
              unit="万度"
              theme-one="#00F6F8"
            />
            <DotLineChart
              :data="dotLineChartData"
              unit="万度"
              style="height: 11.4375rem; margin-top: 0.9375rem"
            />
          </div>
          <div class="content-left">
            <SubTitle
              title="今日供/排水"
              he="1.4375rem"
              :isMutiple="true"
              :num="[2600, 19319]"
              unit="m³"
              theme-one="#00F6F8"
              theme-two="#A2B9FD"
            />
            <LineChart
              style="height: 11.4375rem; margin-top: 0.9375rem"
              :chart-data="hypdropowerData"
              :area="lineChartOption.area"
              :unit="lineChartOption.unit"
              :color="lineChartOption.color"
              :showLegend="true"
              :text="['今日供/排水']"
            />
          </div>
        </div>
      </template>
    </data-box>
  </div>
</template>

<script>
import GroupBarChart from '@/components/chart/cockpit/GroupBarChart.vue';
import DataBox from '../lib/dataBox.vue';
import SubTitle from '../lib/subTitle.vue';
import LineChart from '@/components/chart/cockpit/LineChart';
import DotLineChart from '@/components/chart/cockpit/DotLineChart.vue';

export default {
  name: 'DafosiControlWebBottom',

  components: { DataBox, SubTitle, GroupBarChart, LineChart, DotLineChart },

  data() {
    return {
      hypdropower_box_header: require('../../../assets/img/decisionAnalysis/hypdropower_box_header.png'),
      wind_box_header: require('../../../assets/img/decisionAnalysis/wind_box_header.png'),
      chartOption: {
        // color: ['l(90) 1:#04344D  0:#01F9FB', 'l(90) 1:#1D3255  0:#A2B9FD'],
        color: ['#01F9FB', '#A2B9FD'],
        area: true,
        unit: '万m³'
      },
      lineChartOption: {
        color: ['#00fdff', '#a2b9fd'],
        area: true,
        unit: 'm³'
      },
      hypdropowerData: [
        { x: '12-01', y: 75, s: '供水量' },
        { x: '12-01', y: 30, s: '排水量' },
        { x: '12-02', y: 60, s: '供水量' },
        { x: '12-02', y: 37, s: '排水量' },
        { x: '12-03', y: 79, s: '供水量' },
        { x: '12-03', y: 42, s: '排水量' }
      ],
      gasChartData: [
        { name: '瓦斯抽采', x: '8.1', y: 18.9 },
        { name: '瓦斯抽采', x: '8.2', y: 39.3 },
        { name: '瓦斯抽采', x: '8.3', y: 81.4 },
        { name: '瓦斯抽采', x: '8.4', y: 47 },
        { name: '瓦斯抽采', x: '8.5', y: 20.3 },
        { name: '瓦斯抽采', x: '8.6', y: 24 },
        { name: '瓦斯抽采', x: '8.7', y: 35.6 },
        { name: '瓦斯利用', x: '8.1', y: 12.4 },
        { name: '瓦斯利用', x: '8.2', y: 23.2 },
        { name: '瓦斯利用', x: '8.3', y: 34.5 },
        { name: '瓦斯利用', x: '8.4', y: 99.7 },
        { name: '瓦斯利用', x: '8.5', y: 52.6 },
        { name: '瓦斯利用', x: '8.6', y: 35.5 },
        { name: '瓦斯利用', x: '8.7', y: 37.4 }
      ],
      dotLineChartData: [
        { x: '0:00', y: 2 },
        { x: '4:00', y: 3 },
        { x: '8:00', y: 2 },
        { x: '12:00', y: 3 },
        { x: '16:00', y: 3 },
        { x: '24:00', y: 2 },
        { x: '20:00', y: 1 }
      ],
      // 瓦斯抽采列表
      gasDataList: [
        {
          img: require('../../../assets/img/decisionAnalysis/extraction.png'),
          title: '今日抽采',
          num: '3.12'
        },

        {
          img: require('../../../assets/img/decisionAnalysis/make_use_of.png'),
          title: '今日利用',
          num: '7.33'
        }
      ],
      // 通风量统计列表
      windDataList: [
        {
          img: require('../../../assets/img/decisionAnalysis/wind_into.png'),
          title: '今日总进风量',
          num: '31055'
        },
        {
          img: require('../../../assets/img/decisionAnalysis/wind_back.png'),
          title: '今日总回风量',
          num: '30712'
        },
        {
          img: require('../../../assets/img/decisionAnalysis/wind_average.png'),
          title: '当月平均回风量',
          num: '30652'
        }
      ],
      // 回风井列表
      windWellList: [
        {
          icon: require('../../../assets/img/decisionAnalysis/well_icon.png'),
          arrow: require('../../../assets/img/decisionAnalysis/well_arrow.png'),
          title: '1#回风立井',
          status: 1
        },
        {
          icon: require('../../../assets/img/decisionAnalysis/well_icon.png'),
          arrow: require('../../../assets/img/decisionAnalysis/well_arrow.png'),
          title: '2#回风立井',
          status: 1
        },
        {
          icon: require('../../../assets/img/decisionAnalysis/well_icon.png'),
          arrow: require('../../../assets/img/decisionAnalysis/well_arrow.png'),
          title: '3#回风立井',
          status: 0
        }
      ]
    };
  },

  mounted() {},

  methods: {}
};
</script>

<style lang="scss" scoped>
::v-deep .data-box-content {
  // margin-left: 0.25rem;
}
.data-box {
  .tab {
    @include date-tab();
  }
}
.bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.25rem;
}
// 智能瓦斯抽采
.gas-box {
  .gas-content {
    display: flex;
    .gas-data {
      &-item {
        display: flex;
        margin-top: 2.6875rem;
        img {
          width: 4.125rem;
          height: 100%;
        }
        .desc {
          display: flex;
          flex-direction: column;

          margin-left: 0.875rem;
          .text {
            margin-top: 0.875rem;
          }
          .title {
            height: 0.875rem;
            font-size: 0.875rem;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            color: #a2a7ba;
            line-height: 1;
            margin-top: 0.4375rem;
          }
          .num {
            height: 1.125rem;
            font-size: 1.125rem;
            font-family: Agency FB, Agency FB-Bold;
            font-weight: 700;
            line-height: 1;
          }
          .unit {
            height: 0.75rem;
            font-size: 0.75rem;
            font-family: PingFang SC, PingFang SC-Regular;
            color: #a2a7ba;
            line-height: 1;
            margin-left: 0.3125rem;
          }
        }
      }
    }
  }
}

// 智能通风
.wind-box {
  .wind-content {
    display: flex;
    justify-content: space-between;
    .wind-data {
      &-item {
        display: flex;
        img {
          width: 4.125rem;
        }
        .desc {
          display: flex;
          flex-direction: column;
          margin-left: 0.875rem;
          .text {
            margin-top: 0.875rem;
          }
          .title {
            height: 0.875rem;
            font-size: 0.875rem;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            color: #a2a7ba;
            line-height: 1;
            margin-top: 0.4375rem;
          }
          .num {
            height: 1.125rem;
            font-size: 1.125rem;
            font-family: Agency FB, Agency FB-Bold;
            font-weight: 700;
            line-height: 1;
          }
          .unit {
            height: 0.75rem;
            font-size: 0.75rem;
            font-family: PingFang SC, PingFang SC-Regular;
            color: #a2a7ba;
            line-height: 1;
            margin-left: 0.3125rem;
          }
        }
      }
      &-item:not(:first-child) {
        margin-top: 1.0431rem;
      }
    }
    .wind-well {
      &-item {
        display: flex;
        width: 18.625rem;
        height: 4.25rem;
      }
      &-item:not(:first-child) {
        margin-top: 0.625rem;
      }
      &-left {
        width: 13.25rem;
        height: 100%;
        display: flex;
        align-items: center;
        background-color: #11243d;
        .well {
          img {
            margin-left: 1.8125rem;
          }
        }
        .well-title {
          margin-left: 0.625rem;
          img {
            width: 0.875rem;
            height: 0.9375rem;
            vertical-align: middle;
          }
          .title {
            margin-left: 0.375rem;
          }
        }
      }
      &-default,
      &-active {
        line-height: 4.25rem;
        text-align: center;
        margin-left: 0.0625rem;
        width: 5.375rem;
        height: 100%;
        background-color: #11243d;
        font-size: 1.25rem;
      }
      &-default {
        color: #a2a7ba;
      }
      &-active {
        color: #01fbac;
      }
    }
  }
}

// 智能供电与供排水
.hypdropower-box {
  .hypdropower-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2.3125rem;
  }
}
</style>
